<template>
  <!-- 上面为四种情况
  <div class="father-box">
      <div class="father-title">父组件</div>
      <son></son>
    </div>-->
  <!--下面为两种情况
  改变dom结构，子组件作为最外面的元素 -->
  <son></son>
</template>

<script>
import Son from './components/Son.vue'

export default {
  name: 'FatherPage',
  components: { Son }
}
</script>

<style scoped lang="scss">
// scoped
// (1)它给组件dom结果添加data-v-xxx的自定义属性
// (2)它给组件样式'最后面'添加自定义属性
//.son-title[data-v-c88a5e66]
//不起作用,父组件不能作用于子组件里面的dom元素
/*
.son-title{
  color: red;
}
*/
//起作用,父组件作用于子组'根'dom元素
/*
.son-box{
  //通过样式继承
  color: red;
}
*/
//不起作用
// .son-box .son-title[data-v-c88a5e66]
/*
.son-box .son-title{
  //通过样式继承
  color: red;
}
*/
// 起作用,把自定义属性放到最前面,通过样式穿透
//[data-v-c88a5e66] .son-title
/*::v-deep .son-title {
  color: red;
}*/

// 下面两种情况 就是选择器的特性所导致的（空格）

// [data-v-c88a5e66] .son-box .son-title
// 父组件下面的son-box,然后下面的son-title
// ::v-deep .son-box .son-title{
//   color: red;
// }

// [data-v-c88a5e66].son-box .son-title
// 父里面里面的son-box,然后下面的son-title
::v-deep.son-box .son-title {
  color: red;
}
</style>
